/**
 * 考生管理
 */

<template>
  <div class="examinee">
    <div class="examineeBox">
      <div class="examineeBoxHeader">
        <el-card class="box-card">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名：">
              <el-input
                v-model="formInline.studentName"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="证件号：">
              <el-input
                v-model="formInline.idCardNo"
                placeholder="请输入证件号"
              ></el-input>
            </el-form-item>
            <el-form-item label="学院：">
              <el-input
                v-model="formInline.colleage"
                placeholder="请输入学院"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <div class="examineeBoxMian">
        <el-table
          ref="multipleTable"
          :data="examineeList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="studentName" label="姓名"> </el-table-column>
          <el-table-column prop="gender" label="性别"> </el-table-column>
          <el-table-column prop="colleageName" label="学院"> </el-table-column>
          <el-table-column prop="number" label="年级"> </el-table-column>
          <el-table-column prop="className" label="班级"> </el-table-column>
          <el-table-column prop="action" label="操作">
            <template slot-scope="scope">
              <span class="detailSpan" @click="goDetail(scope.row.id)"
                >详情</span
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination" v-if="examineeList.length > 0">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            prev-text="上一页"
            next-text="下一页"
            layout=" prev, pager, next"
            :total="total"
          >
          </el-pagination>
          <div class="jumper">
            跳到第
            <input type="text" ref="currentPage" value="1" />
            页
          </div>
          <button class="submit" @click="goPage">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getExamineeListApi } from "@/api/testManagement/examinee";

export default {
  data() {
    return {
      total: 0,
      pageSize: 10,
      currentPage: 1,
      examineeList: [],
      multipleSelection: [],
      formInline: {
        studentName: "",
        idCardNo: "",
        colleage: "",
      },
    };
  },

  mounted() {
    // 获取考生列表
    this.getExamineeList({
      pageNum: this.currentPage,
      pageSize: this.pageSize,
    });
  },
  methods: {
    // 获取考生列表
    getExamineeList(data) {
      getExamineeListApi(data).then((res) => {
        console.log(res);
        this.examineeList = res.rows;
        this.total = res.total;
      });
    },

    onSubmit() {},

    // 查看详情
    goDetail(id) {
      this.$router.push({
        name: "Details",
        query: {
          id,
        },
      });
    },

    // 已选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getExamineeList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
    },

    // 跳转当前页
    goPage() {
      let { value } = this.$refs.currentPage;
      this.currentPage = Number(value);
      this.getExamineeList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
    },
  },
};
</script>

<style lang='scss' scoped >
.examinee {
  width: 100%;
  height: 100%;

  .examineeBox {
    width: 100%;
    height: 100%;
    padding: 0 15px 15px;
    border-radius: 10px;

    .examineeBoxHeader {
      border-radius: 10px;
    }

    .examineeBoxMian {
      margin-top: 15px;
      border-radius: 10px;

      .pagination {
        display: flex;
        align-items: center;
        justify-content: right;
        margin-top: 20px;
        margin-right: 20px;
        padding: 0 0 20px 0;

        .jumper {
          font-size: 14px;
          margin-left: 20px;
          margin-right: 10px;
          display: flex;
          align-items: center;

          input {
            width: 40px;
            height: 26px;
            margin: 0 5px;
            text-align: center;
            border: solid 1px #e6e6e6;
            border-radius: 5px;
            color: #666;
            outline-style: none;
          }
        }

        button {
          height: 28px;
          line-height: 28px;
          border-radius: 5px;
          font-size: 14px;
          padding: 0 8px;
          border: solid 1px #e6e6e6;
          color: #666;
        }

        .submit {
          color: #fff;
          background-color: #4895db;
          border: solid 1px #4895db;
        }
      }

      .detailSpan {
        color: #339dff;
        cursor: pointer;
      }
    }
  }
}
</style>
